<template>
  <van-sticky>
      <Header />
  </van-sticky>
  <div class="main">
    <div class="up-panel">
      <div class="left-header">
        <van-icon color="rgb(28, 199, 251)" size="4.5vw" name="description" />
        <span style="font-weight: bold;margin-left: 1vw">我常买</span>
      </div>
      <div class="right-header">
        <van-icon name="shop-collect" size="4.5vw" color="rgb(28, 199, 251)"/>
        <span style="font-weight: bold;margin: 0 1vw">全能超市</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <van-cell-group inset style="width: 90%;margin-top:5vw;margin-bottom: 15vw" v-for="item in OrderList" :key="item.orderId">
        <van-cell>
        <template #value>
          <span>{{getMinutesDifference(item.orderDate)}}分钟</span>
          <van-icon color="rgb(156, 156, 156)" name="delete" style="margin-left: 2vw"/>
        </template>
        <template #title>
          <span style="font-size: 1.6vh;font-weight: bolder">
            {{ item.business.businessName }}
          </span>
        </template>
        <template #label>
         <span style="color: rgb(233, 120, 105)">配送费减{{ item.business.deliveryPrice }}</span>
        </template>
      </van-cell>
      <van-swipe-cell style="display: flex;justify-content: center;align-items: center;margin-bottom: 3vh">
          <van-card
              v-for="v in item.list" :key="v.foodId"
              style="width:80vw;border-radius: 10px;">
            <template #title>
              <div style="font-size: 3.5vw;font-weight: bold">
                {{v.food.foodName}}
              </div>
              <br>
            </template>
            <template #desc>
              <div style="font-style: italic">
                {{v.food.foodExplain}}
              </div>
            </template>
            <!-- 自定义价格 -->
            <template #price>
              <span style="font-size:0.8rem;color: rgb(182,63,72)">￥</span>
              <span style="font-size: 2vh;color: rgb(182,63,72)"> {{v.food.foodPrice}}</span>
            </template>
            <!-- 自定义图片  -->
            <template #thumb>
              <van-image fit="cover" :src="v.food.foodImg" />
            </template>
            <template #num>
              <span style="display: flex; align-items: center">
                <span style="margin: 0 2.2vw; font-size:1.5vh ;font-weight: bolder">
                  ×{{ v.quantity }}
                </span>
              </span>
            </template>
          </van-card>
      </van-swipe-cell>

    </van-cell-group>
  </div>

</template>

<script setup lang="ts">
import Header from '@/views/Tabber/shopping/components/Header.vue'
import {onMounted} from "vue";
import {queryOrder} from "@/api/order/index.ts";
import {GET_USERID} from "@/utils/localStore.ts";
import {ref} from 'vue'
import type {OrderResponseData} from "@/api/order/type.ts";

const userId=GET_USERID() as string;
const checked=ref();
//遍历列表
const FoodListMap = ref({});

const OrderList:any=ref([]);
const query=async ()=>{
  // console.log(userId);
  let result:OrderResponseData=await queryOrder(userId);
  console.log(result);
  if(result.code==1){
    OrderList.value=result.data;
  }
  console.log(OrderList.value)
}

onMounted(()=>{
  query();
})

function getMinutesDifference(givenTimeStr:string) {
  // 将给定的时间字符串转换为Date对象
  const givenTime = new Date(givenTimeStr);

  // 获取当前时间的Date对象
  const currentTime = new Date();

  // 计算两个时间的差值（以毫秒为单位）
  const diffInMilliseconds = currentTime - givenTime;

  // 将差值转换为分钟
  const diffInMinutes = Math.floor(diffInMilliseconds / 1000 / 60);

  return diffInMinutes;
}
</script>

<style scoped>
.main{
  width: 100%;
  background-color:rgb(225, 238, 246);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}
.main .up-panel{
  width: 95%;
  height: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.up-panel .left-header{
  height: 5vh;
  border-radius: 10px;
  background-color: #fff;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.up-panel .right-header{
  height: 5vh;
  border-radius: 10px;
  background-color: #fff;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>